<template>
  <div class="home">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>CAL1630连退跑偏分析预测模型</h1>
      </div>
    </div>
    <div class="home-main">
      <el-row class="top h-90%">
        <el-col :span="6">
          <span class="warn">
            <p style="position: absolute; width: 180px; top: 35%; left: 7%; font-size: 16px">跑偏模型后卷过度异常</p>
            <img :src="imagePath(1)" style="width: 350px" />
          </span>
        </el-col>
        <el-col :span="6">
          <span class="warn">
            <p style="position: absolute; width: 180px; top: 35%; left: 32%; font-size: 16px">炉温控制后卷过度异常</p>
            <img :src="imagePath(2)" style="width: 350px" />
          </span>
        </el-col>
        <el-col :span="6">
          <span class="warn">
            <p style="position: absolute; width: 180px; top: 35%; left: 57%; font-size: 16px">炉辊打滑后卷过度异常</p>
            <img :src="imagePath(3)" style="width: 350px" />
          </span>
        </el-col>
        <el-col :span="6">
          <span class="warn">
            <p style="position: absolute; width: 180px; top: 35%; left: 82%; font-size: 16px">平整AI模型正常</p>
            <img :src="imagePath(4)" style="width: 350px" />
          </span>
        </el-col>
      </el-row>
      <el-row>
        <!-- <el-col class="top-middle" :span="7">
                  <div class="msg-title">跑偏模型报警:</div>
                  <div class="information">
                      <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="8000">
                      <span>&nbsp; 后卷过度异常，模型进行了**调整</span>
                      <el-icon style="color: red !important"><SuccessFilled /></el-icon>
                      </el-carousel>
                  </div>
  
  
              </el-col>
              <el-col class="top-middle" :span="7">
                  <div class="msg-title">炉温控制模型报警:</div>
                  <div class="information">
                      <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="8000">
                      <span>&nbsp; 后卷过度异常，模型进行了**调整</span>
                      <el-icon style="color: red !important"><SuccessFilled /></el-icon>
                      </el-carousel>
                  </div>
  
  
              </el-col>  
              <el-col class="top-middle" :span="7">
                  <div class="msg-title">炉温打滑模型报警:</div>
                  <div class="information">
                      <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="8000">
                      <span>&nbsp; 后卷过度异常，模型进行了**调整的点点滴滴的点点滴顶顶顶顶滴</span>
                      <el-icon style="color: red !important"><SuccessFilled /></el-icon>
                      </el-carousel>
                  </div>
  
  
              </el-col>             -->
      </el-row>
      <el-row class="middle">
        <div class="svg">
          <svg-load :name="deviationTempModel" style="z-index: 999"></svg-load>
        </div>
        <div class="export_looper semitransp_box">
          <p style="width: 70px">入口活套 {{ numberFormat1(inletLooper / 100) }} %</p>
        </div>
        <div class="export_looper_time semitransp_box">
          <!-- <p>冲套时间</p> -->
          <p style="width: 70px">{{ inletLooperTime }}</p>
        </div>
        <div class="cpc4_width cpc4_semitransp_box" :class="cpc4WidthAlarm ? 'is_alarm' : ''">
          <p>CPC4测宽值</p>
          <p>{{ numberFormat1(cpc4Width) }}mm</p>
        </div>
        <div class="middle_looper semitransp_box">
          <p style="width: 60px">中间活套 {{ numberFormat1(middleLooper / 100) }} %</p>
        </div>
        <!-- <div class="entZincPot semitransp_box">
                <p style="color:#FF0000;">入锅温度</p>
                <p style="color:#FF0000;">{{ numberFormat1(entZincPot) }} ℃</p>
              </div>
              <div class="zincPotGa semitransp_box">
                <p style="color: #FFD700">GA锅</p>
                <p style="color: #FFD700">{{ numberFormat1(zincPotGa) }} ℃</p>
              </div>
              <div class="zincPotGi semitransp_box">
                <p style="color: #7FFF00">GI锅</p>
                <p style="color: #7FFF00">{{ numberFormat1(zincPotGi) }} ℃</p>
              </div> -->

        <!-- <div class="AlFeBox">
                  <div>
                  <span>{{giALFeData.time}}</span>
                  </div>
                  <div>
                  <span>铁：</span>
                  <span style="color: #FFD700">{{giALFeData.Fe}}</span>
                  </div>
                  <div>
                  <span>铝：</span>
                  <span style="color: #7FFF00">{{giALFeData.Al}}</span>
                  </div>
              </div> -->
        <div class="middle_looper_time semitransp_box">
          <!-- <p>跑空时间</p> -->
          <p style="width: 60px">{{ middleLooperTime }}</p>
        </div>
        <div class="inlet_looper semitransp_box">
          <p style="width: 60px">出口活套 {{ numberFormat1(exportLooper / 100) }} %</p>
        </div>
        <div class="inlet_looper_time semitransp_box">
          <!-- <p>冲套时间</p> -->
          <p style="width: 60px">{{ exportLooperTime }}</p>
        </div>
        <!-- <div class="uncoiler_remaining_length_a semitransp_box">
                  <p>#1开卷机剩余长度</p>
                  <p>{{ numberFormat1(uncoiler_remaining_length_a) }} m</p>
              </div>
              <div class="uncoiler_remaining_length_b semitransp_box">
                  <p>#2开卷机剩余长度</p>
                  <p>{{ numberFormat1(uncoiler_remaining_length_b) }} m</p>
              </div> -->
        <!-- <div class="coiler_remaining_length_b semitransp_box">
                  <p>卷取长度</p>
                  <p>{{ numberFormat1(coiler_remaining_length_b) }} m</p>
              </div> -->
        <!-- <div class="yield-strength semitransp_box" style="position:absolute;left: 65.1vw;top: 6vh;padding: 0 .5rem;display:flex">
                <p style="padding-top:2px">屈服强度：</p>
                <p style="padding-top:2px">{{ numberFormat1(yieldStrength) }} </p>
              </div>
  
              <div class="yield-strength semitransp_box" style="position:absolute;left: 65.1vw;top: 9vh;padding: 0 .5rem;display:flex">
                  <p style="padding-top:2px">抗拉强度：</p>
                  <p style="padding-top:2px">{{ numberFormat1(yieldPull) }} </p>
              </div> -->

        <!-- <div class="semitransp_box"  style="position:absolute;left: 79vw;top: 17vh;padding: 0 .5rem;display:flex">
                  <p>上涂油：</p>
                  <p>{{ oilTop * 1 }} </p>
               </div>
              <div class="semitransp_box" style="position:absolute;left:79vw;top: 25vh;padding: 0 .5rem;display:flex">
                  <p>下涂油：</p>
                  <p>{{ oilBot * 1 }} </p>
              </div> -->

        <div class="uncoiler_remaining_length_a semitransp_box">
          <p>#1卷取长度</p>
          <p>{{ numberFormat(uncoiler_remaining_length_a, 0) }} m</p>
        </div>
        <div class="uncoiler_remaining_length_b semitransp_box">
          <p>#2卷取长度</p>
          <p>{{ numberFormat(uncoiler_remaining_length_b, 0) }} m</p>
        </div>
        <div class="coiler_remaining_length_a semitransp_box">
          <p>#1开卷机剩余长度</p>
          <p>{{ numberFormat(coiler_remaining_length_a, 0) }} m</p>
        </div>
        <div class="coiler_remaining_length_b semitransp_box">
          <p>#2开卷机剩余长度</p>
          <p>{{ numberFormat(coiler_remaining_length_b, 0) }} m</p>
        </div>

        <div id="middle_speed1" style="margin-left: 5%"></div>
        <div id="middle_speed2" style="margin-left: 20%"></div>
        <!-- <div id="middle_speed3" style="margin-left:168px;"></div> -->
        <div id="middle_speed4" style="margin-left: 48px"></div>
      </el-row>
      <!-- 替换 foot-lineChart 区域为两个图表，左1右2 -->
      <el-row class="foot-lineChart">
        <el-col :span="8">
          <div id="furnaceTensionChart" class="chart-box"></div>
        </el-col>
        <el-col :span="16">
          <div id="deviationAlarmChart" class="chart-box"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <new-coil-card title="实时钢卷信息">
            <el-table
              :data="footTable"
              :header-cell-style="{ background: '#2f59af', color: '#fff', fontSize: '15px', border: 'none' }"
              :cell-style="getCellStyle"
              @row-click="handleCoilRowClick"
            >
              <el-table-column type="index" label="序号" />
              <el-table-column prop="entId" label="卷号" />
              <el-table-column prop="steelGrade" label="钢种" />
              <el-table-column prop="width" label="宽度" />
              <el-table-column prop="thickness" label="厚度" />
              <el-table-column prop="paoPianRate" label="预测跑偏概率(%)" :formatter="(row: any) => percentFormat(row.paoPianRate)" />
              <el-table-column prop="c40Passrate" label="凸度命中率(%)" :formatter="(row: any) => percentFormat(row.c40Passrate)" />
              <el-table-column prop="w40Passrate" label="楔形命中率(%)" :formatter="(row: any) => percentFormat(row.w40Passrate)" />
              <el-table-column prop="ascDesc" label="板形状况" />
              <el-table-column prop="ascHeadJifen" label="头部板形" />
              <el-table-column prop="ascMidJifen" label="中部板形" />
              <el-table-column prop="ascTailJifen" label="尾部板形" />
              <el-table-column prop="gradePaoPianRate" label="品规跑偏概率(%)" :formatter="(row: any) => percentFormat(row.gradePaoPianRate)" />
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
    </div>
  </div>

  <!-- 新增弹窗 -->
  <!-- 替换 el-dialog 部分为自定义弹窗 -->
  <div v-if="showShapeDialog" class="custom-dialog-overlay" @click.self="showShapeDialog = false">
    <div class="custom-dialog-content">
      <div class="custom-dialog-header">
        <span>板形仪通道号(长度序列){{ selectedCoilId }}</span>
        <span class="custom-dialog-close" @click="showShapeDialog = false">×</span>
      </div>
      <div class="custom-dialog-body">
        <div id="shape-curve-echart" class="custom-echart-bg"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, watch, onUnmounted } from 'vue';
  import { refreshSVG, initialSVG, refreshGraphical } from '/@/common/refreshSVG';
  import NewCoilCard from '/@/components/NewCoilCard/NewCoilCard.vue';
  import axios from 'axios';
  import * as echarts from 'echarts';
  import { useUserStore } from '/@/store/modules/system/user';
  import { continuousrefund2150Api } from '/@/api/continuousrefund/continuousrefund2150';
  import { historyApi } from '/@/api/furnaceTempDynamicCtrl/history';
  import { sleeveDeclineTime } from '/@/views/common/FulllineTrack/full.line.track.handle';

  const deviationTempModel = 'CAL1630';

  enum ColourType {
    ZERO = 0,
    ONE = 1,
    TWO = 2,
    THREE = 3,
    FOUR = 4,
    FIVE = 5,
    SEX = 6,
    SEVEN = 7,
    EIGHT = 8,
    NINE = 9,
    INITLINE = -1,
    INITLGRAPHICAL = -2,
  }

  const ColourStrategy = {
    [ColourType.ZERO]: () => '#FF6600',
    [ColourType.ONE]: () => '#FF00FF',
    [ColourType.TWO]: () => '#CC3300',
    [ColourType.THREE]: () => '#0099FF',
    [ColourType.FOUR]: () => '#F08080',
    [ColourType.FIVE]: () => '#C0C0C0',
    [ColourType.SEX]: () => 'rgba(255,128,64,255)',
    [ColourType.SEVEN]: () => '#C71585',
    [ColourType.EIGHT]: () => 'rgba(147,147,0,255)',
    [ColourType.NINE]: () => 'rgba(255,128,192,255)',
    [ColourType.INITLINE]: () => '#5F6368',
    [ColourType.INITLGRAPHICAL]: () => '#1E1E1E',
  };

  function SearchForCoidId(zones: any) {
    const object: { [key: string]: string } = {};
    const coilIds = new Set<string>();
    if (zones) {
      for (const key in zones) {
        const zone = zones[key];
        if (zone.entId) {
          coilIds.add(zone.entId);
          if (!object[zone.entId]) {
            object[zone.entId] = (ColourStrategy as any)[zone.ti % 10]();
          }
        }
      }
    }
    return {
      coilIds: Array.from(coilIds),
      colors: object,
    };
  }

  const coilIdColors = ref<any>({});

  const getCellStyle = ({ row }: { row: any }) => {
    if (coilIdColors.value.colors && coilIdColors.value.colors[row.entId]) {
      return { color: coilIdColors.value.colors[row.entId], fontSize: '15px' };
    }
    return { fontSize: '10px' };
  };

  // API Data Store
  const apiData = ref<any>({});
  const data = ref([
    { menuName: '2150continuousrefunds', menuTitle: '连退跑偏分析模型主页', menuId: '1' },
    { menuName: '2150PlanRollDeviationPrediction', menuTitle: '计划卷跑偏预测页面' },
    { menuName: '2150ActualPerformanceRollDeviation', menuTitle: '生产实绩跑偏页面' },
    { menuName: '2150AccuracyDiagnosisOfCorrectionEquipment', menuTitle: '纠偏设备精度诊断' },
    { menuName: '2150DeviationClassificatioStatistics', menuTitle: '跑偏分档统计' },
    { menuName: '2150AcidRolledStandardCoil', menuTitle: '酸轧板形标准卷' },
  ]);
  let intervalId: any = undefined;

  const imagePath = (rowIndex: number) => {
    const name = 'warn.png';
    const normal = 'normal.png';
    if (rowIndex === 4) {
      return `/src/assets/images/${normal}`;
    } else {
      return `/src/assets/images/${name}`;
    }
  };

  const entSpeed = ref<number>(0);
  const spmSpeed = ref<number>(0);
  const extSpeed = ref<number>(0);
  const lineSpeed = ref<number>(0);
  const inletLooper = ref<number>(0);
  const middleLooper = ref<number>(0);
  const exportLooper = ref<number>(0);
  const inletLooperTime = ref<string>('0');
  const middleLooperTime = ref<string>('0');
  const exportLooperTime = ref<string>('0');
  const cpc4Width = ref<number>(0);
  const cpc4WidthAlarm = ref<boolean>(false);
  const uncoiler_remaining_length_a = ref<number>(0);
  const uncoiler_remaining_length_b = ref<number>(0);
  const coiler_remaining_length_a = ref<number>(0);
  const coiler_remaining_length_b = ref<number>(0);
  const trackData = ref({ speed: 0, realTV: 0 });

  const technologicalName = 'CAL1630';
  let tr: any = ref(null);
  let por: any = ref(null);
  let ti: any = ref(null);
  const cenSpeed = ref<number>();

  const numberFormat = (number: any, precision: number = 0) => {
    if (number === undefined || number === null || String(number).trim() === '') {
      const zero = 0;
      return zero.toFixed(precision);
    }
    const num = parseFloat(String(number));
    if (isNaN(num)) {
      const zero = 0;
      return zero.toFixed(precision);
    }
    return num.toFixed(precision);
  };

  const numberFormat1 = (number: any) => {
    return number == undefined ? 0 : Number(parseFloat(number).toFixed(0));
  };

  // 百分比格式化函数
  const percentFormat = (val: any) => {
    const num = parseFloat(val);
    if (isNaN(num)) return '-';
    // 保留一位小数，去除多余0
    return (Math.round(num * 1000) / 10).toString().replace(/\.0$/, '') + '%';
  };

  const updateAllData = async () => {
    try {
      // 1. Fetch primary tracking data (the source of truth)
      const zoneTrackResponse = await axios.get('http://10.171.7.100:8090/restapi?name=CAL1630_zonetrk');
      const newZoneTrackData = zoneTrackResponse.data;

      if (!newZoneTrackData || !newZoneTrackData.zoneno) {
        footTable.value = [
          {
            entId: '-',
            paoPianRate: '-',
            c40Passrate: '-',
            w40Passrate: '-',
            ascDesc: '-',
            ascHeadJifen: '-',
            ascMidJifen: '-',
            ascTailJifen: '-',
            gradePaoPianRate: '-',
            steelGradeAttention: '-',
            gradeCode: '-',
            widthCode: '-',
            thickCode: '-',
            gradePaoPianRateTrue: '-',
            cpc4aPaoPianRate: '-',
            cpc4PaoPianRate: '-',
            cpc5aPaoPianRate: '-',
            cpc5PaoPianRate: '-',
          },
        ]; // 没有数据时给默认假数据，防止表格向右移动
        return;
      }

      // --- Start of SVG and Color Update Logic ---
      const trackingInfo = SearchForCoidId(newZoneTrackData.zoneno);
      coilIdColors.value = trackingInfo; // Use the whole object for coloring

      let zones = newZoneTrackData.zoneno;
      // SVG tracking state variables
      if (tr.value === null || tr.value !== newZoneTrackData.tr) {
        tr.value = newZoneTrackData.tr;
        let trKey = `${technologicalName}-ZONE_tr${newZoneTrackData.tr}`;
        let trpathKey = trKey + '_path';
        refreshSVG(zones[Object.keys(zones).length - 1].ti % 10, trpathKey);
        refreshGraphical(zones[Object.keys(zones).length - 1].ti % 10, trKey);
        initialSVG(technologicalName, 'tr', newZoneTrackData.tr);
      }
      if (por.value === null || por.value !== newZoneTrackData.por) {
        por.value = newZoneTrackData.por;
        if (newZoneTrackData.por === 0) {
          initialSVG(technologicalName, 'por', '1');
          initialSVG(technologicalName, 'por', '2');
        }
      }
      if (ti.value === null || ti.value !== zones[0].ti) {
        ti.value = zones[0].ti;
        let porKey = `${technologicalName}-ZONE_por${newZoneTrackData.por}`;
        let porpathKey = porKey + '_path';
        refreshSVG(zones[0].ti % 10, porpathKey);
        refreshGraphical(zones[0].ti % 10, porKey);
        initialSVG(technologicalName, 'por', newZoneTrackData.por);
      }
      for (let i in zones) {
        let pathkey = `${technologicalName}-ZONE${i}`;
        refreshSVG(zones[i].ti % 10, pathkey);
      }
      // --- End of SVG and Color Update Logic ---

      // 3. Fetch detailed info for coils on the line
      const uniqueEntIds = trackingInfo.coilIds.filter((id) => id);

      if (uniqueEntIds.length > 0) {
        const steelInfoResponse = await continuousrefund2150Api.getSteelInfo(uniqueEntIds);
        if (steelInfoResponse && steelInfoResponse.data.data) {
          const processedData = steelInfoResponse.data.data.map((item: any) => {
            const newItem = { ...item };
            const fieldsToProcess = [
              'c40Passrate',
              'w40Passrate',
              'ascHeadJifen',
              'ascMidJifen',
              'ascTailJifen',
              'gradePaoPianRate',
              'paoPianRate',
              'steelGradeAttention',
              'gradePaoPianRateTrue',
              'cpc4aPaoPianRate',
              'cpc4PaoPianRate',
              'cpc5aPaoPianRate',
              'cpc5PaoPianRate',
            ];
            fieldsToProcess.forEach((field) => {
              if (newItem[field] === null || newItem[field] === undefined || String(newItem[field]).trim() === '') {
                newItem[field] = '0.000';
              } else {
                const num = parseFloat(newItem[field]);
                if (!isNaN(num)) {
                  newItem[field] = num.toFixed(3);
                }
              }
            });
            return newItem;
          });
          footTable.value = processedData;
        } else {
          footTable.value = [
            {
              entId: '-',
              paoPianRate: '-',
              c40Passrate: '-',
              w40Passrate: '-',
              ascDesc: '-',
              ascHeadJifen: '-',
              ascMidJifen: '-',
              ascTailJifen: '-',
              gradePaoPianRate: '-',
              steelGradeAttention: '-',
              gradeCode: '-',
              widthCode: '-',
              thickCode: '-',
              gradePaoPianRateTrue: '-',
              cpc4aPaoPianRate: '-',
              cpc4PaoPianRate: '-',
              cpc5aPaoPianRate: '-',
              cpc5PaoPianRate: '-',
            },
          ];
        }
      } else {
        footTable.value = [
          {
            entId: '-',
            paoPianRate: '-',
            c40Passrate: '-',
            w40Passrate: '-',
            ascDesc: '-',
            ascHeadJifen: '-',
            ascMidJifen: '-',
            ascTailJifen: '-',
            gradePaoPianRate: '-',
            steelGradeAttention: '-',
            gradeCode: '-',
            widthCode: '-',
            thickCode: '-',
            gradePaoPianRateTrue: '-',
            cpc4aPaoPianRate: '-',
            cpc4PaoPianRate: '-',
            cpc5aPaoPianRate: '-',
            cpc5PaoPianRate: '-',
          },
        ];
      }

      // 4. Fetch other independent data
      const itemTagResponse = await axios.get('http://10.171.7.100:8090/restapi?name=CAL1630_itemtag');
      if (itemTagResponse.data) {
        apiData.value = itemTagResponse.data;
      }

      const hourResponse = await axios.get('http://10.171.7.100:8090/restapi?name=CAL1630_hour');
      if (hourResponse.data) {
        trackData.value.speed = hourResponse.data.speed;
        trackData.value.realTV = hourResponse.data.hour;
      }
    } catch (error) {
      console.error('Error updating data:', error);
    }
  };

  const SpeedBaseOption: any = {
    middle_speed1: { max: 500, segmentation1: 80, segmentation2: 300 },
    middle_speed2: { max: 500, segmentation1: 120, segmentation2: 300 },
    middle_speed3: { max: 500, segmentation1: 80, segmentation2: 300 },
    middle_speed4: { max: 300, segmentation1: 80, segmentation2: 180 },
  };

  onMounted(() => {
    useUserStore().setTagNav(data.value);
    initScoreChart('middle_speed1', entSpeed.value || 0);
    initScoreChart('middle_speed2', spmSpeed.value || 0);
    initScoreChart('middle_speed4', lineSpeed.value || 0);

    updateAllData();
    intervalId = setInterval(() => {
      updateAllData();
    }, 3000); // Poll every 3 seconds

    const furnaceTensionChart = echarts.init(document.getElementById('furnaceTensionChart'));
    furnaceTensionChart.setOption({
      title: {
        text: '炉区张力[kN]',
        left: 10,
        top: 10,
        textStyle: { color: '#fff', fontSize: 14 },
      },
      tooltip: {},
      legend: { show: false },
      grid: { left: 40, right: 20, top: 40, bottom: 30 },
      xAxis: {
        type: 'category',
        data: ['PHS张力', 'HS1张力', 'HS2张力', 'SS张力', 'SCS张力', 'RCS张力', 'OA1张力', 'OA2张力', 'OA3张力', 'FCS张力'],
        axisLabel: { color: '#fff', fontSize: 12, show: true },
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 20,
        axisLabel: { color: '#fff', fontSize: 12 },
      },
      series: [
        {
          type: 'bar',
          data: [14, 9, 8, 8, 8, 11, 10, 10, 11, 15], // 这里后续用实际数据替换
          barWidth: 18,
          itemStyle: { color: '#4ea6e6' },
          barGap: '0%',
          barCategoryGap: '0%',
        },
        {
          type: 'bar',
          data: [12, 8, 7, 7, 7, 10, 9, 9, 10, 14], // 这里后续用实际数据替换
          barWidth: 18,
          itemStyle: { color: '#ffd84a' },
          barGap: '0%',
          barCategoryGap: '0%',
        },
      ],
    });
    // 纠偏报警信息图
    const deviationAlarmChart = echarts.init(document.getElementById('deviationAlarmChart'));
    const cpcLabels = [
      'cpc1',
      'cpc2',
      'cpc3',
      'cpc4',
      'cpc5',
      'cpc6',
      'cpc7',
      'cpc8',
      'cpc9.0',
      'cpc9.1',
      'cpc9.2',
      'cpc9.3',
      'cpc9.4',
      'cpc9.5',
      'cpc9.6',
      'cpc9.7',
      'cpc9.8',
      'cpc10',
      'cpc11',
      'cpc12',
      'cpc13',
      'cpc14',
      'cpc15',
      'cpc16',
      'cpc17',
    ];
    // 静态假数据，液压缸和带钢各26项
    const cpcHydraulic = [10, 12, 8, 15, 7, 9, 11, 13, 6, 8, 10, 12, 7, 9, 11, 13, 8, 10, 12, 8, 15, 7, 9, 11, 13, 8].map(Math.round);
    const cpcStrip = [3, 2, 1, 4, 0, -1, 2, 3, 1, 0, -2, 1, 2, 0, -1, 1, 0, 3, 2, 1, 4, 0, -1, 2, 3, 1].map(Math.round);
    deviationAlarmChart.setOption({
      title: [
        { text: '纠偏报警信息', left: 10, top: 10, textStyle: { color: '#fff', fontSize: 14 } },
        { text: '液压缸(mm)', left: 110, top: 10, textStyle: { color: '#4ea6e6', fontSize: 12 } },
        { text: '带钢(mm)', left: 210, top: 10, textStyle: { color: '#ffd84a', fontSize: 12 } },
      ],
      tooltip: {},
      legend: {
        data: ['液压缸(mm)', '带钢(mm)'],
        right: 30,
        top: 10,
        textStyle: { color: '#fff', fontSize: 12 },
      },
      grid: { left: 40, right: 40, top: 40, bottom: 30 },
      xAxis: {
        type: 'category',
        data: cpcLabels,
        axisLabel: { color: '#fff', fontSize: 12 },
      },
      yAxis: {
        type: 'value',
        min: -100,
        max: 100,
        axisLabel: { color: '#fff', fontSize: 12 },
        splitLine: { lineStyle: { color: '#444' } },
      },
      series: [
        {
          name: '液压缸(mm)',
          type: 'bar',
          data: cpcHydraulic,
          barWidth: 14,
          itemStyle: { color: '#4ea6e6' },
          barGap: '0%',
          barCategoryGap: '0%',
        },
        {
          name: '带钢(mm)',
          type: 'bar',
          data: cpcStrip,
          barWidth: 14,
          itemStyle: { color: '#ffd84a' },
          barGap: '0%',
          barCategoryGap: '0%',
        },
      ],
    });
  });

  onUnmounted(() => {
    if (intervalId) {
      clearInterval(intervalId);
    }
  });

  watch(
    apiData,
    (newTagData) => {
      if (!newTagData || Object.keys(newTagData).length === 0) {
        return;
      }
      // Update speeds, CPC width, coil lengths from newTagData, mapping from NewFulllineTrack.vue
      // Template: middle_speed1 (入口段) -> entSpeed
      // Template: middle_speed2 (光整段) -> spmSpeed
      // Template: middle_speed4 (工艺段) -> lineSpeed

      // Recalculate looper fill/empty times based on latest speeds and looper values
      // Looper values are also in itemtag (G10_303NI: 入口, G10_305NI: 中间, G10_307NI: 出口)
      inletLooper.value = parseFloat(String(newTagData['G10_303NI'] || '0'));
      middleLooper.value = parseFloat(String(newTagData['G10_305NI'] || '0'));
      exportLooper.value = parseFloat(String(newTagData['G10_307NI'] || '0'));

      inletLooperTime.value = sleeveDeclineTime(
        technologicalName,
        'entrance',
        Number(parseFloat(newTagData['G1_1803NI']).toFixed(0)),
        Math.round(trackData.value.speed),
        inletLooper.value / 100
      );
      middleLooperTime.value = sleeveDeclineTime(
        technologicalName,
        'middle',
        Math.round(trackData.value.speed),
        Number(parseFloat(newTagData['G1_1801NI']).toFixed(0)),
        middleLooper.value / 100
      );
      exportLooperTime.value = sleeveDeclineTime(
        technologicalName,
        'exit',
        Number(parseFloat(newTagData['G1_1801NI']).toFixed(0)),
        Number(parseFloat(newTagData['G1_1800NI']).toFixed(0)),
        exportLooper.value / 100
      );
      cpc4Width.value = parseFloat(String(newTagData['G17_405NI'] || '0'));
      extSpeed.value = Number(parseFloat(newTagData['G1_1800NI']).toFixed(0));
      cenSpeed.value = Number(parseFloat(newTagData['G1_1802NI']).toFixed(0));
      entSpeed.value = Number(parseFloat(newTagData['G1_1803NI']).toFixed(0));
      spmSpeed.value = Number(parseFloat(newTagData['G1_1801NI']).toFixed(0));

      coiler_remaining_length_a.value = parseFloat(String(newTagData['G201_529NI'] || '0'));
      coiler_remaining_length_b.value = parseFloat(String(newTagData['G201_536NI'] || '0'));
      uncoiler_remaining_length_a.value = parseFloat(String(newTagData['G414_448NI'] || '0'));
      uncoiler_remaining_length_b.value = parseFloat(String(newTagData['G414_457NI'] || '0'));

      // Refresh ECharts gauges
      if (document.getElementById('middle_speed1')) initScoreChart('middle_speed1', entSpeed.value);
      if (document.getElementById('middle_speed2')) initScoreChart('middle_speed2', spmSpeed.value);
      if (document.getElementById('middle_speed4')) initScoreChart('middle_speed4', cenSpeed.value); // Mapped to cenSpeed (G1_1802NI)

      const cpcHydraulicKeys = [
        'G104_402NI',
        'G104_404NI',
        'G104_406NI',
        'G104_408NI',
        'G104_410NI',
        'G104_412NI',
        'G104_431NI',
        'G104_414NI',
        'G104_416NI',
        'G104_417NI',
        'G104_419NI',
        'G104_420NI',
        'G104_422NI',
        'G104_423NI',
        'G104_425NI',
        'G104_426NI',
        'G104_428NI',
        'G104_429NI',
        'G105_402NI',
        'G105_403NI',
        'G105_405NI',
        'G105_406NI',
        'G105_408NI',
        'G105_409NI',
        'G105_411NI',
        'G105_432NI',
      ];
      const cpcStripKeys = [
        'G104_401NI',
        'G104_403NI',
        'G104_405NI',
        'G104_407NI',
        'G104_409NI',
        'G104_411NI',
        'G104_430NI',
        'G104_413NI',
        'G104_415NI',
        'G104_418NI',
        'G104_421NI',
        'G104_424NI',
        'G104_427NI',
        'G105_401NI',
        'G105_404NI',
        'G105_407NI',
        'G105_410NI',
        'G105_412NI',
        'G105_414NI',
        'G105_416NI',
        'G105_418NI',
        'G105_420NI',
        'G105_422NI',
        'G105_424NI',
        'G105_426NI',
        'G105_426NI',
      ];
      const cpcHydraulic = cpcHydraulicKeys.map((key) => Math.round(Number(newTagData[key] || 0)));
      const cpcStrip = cpcStripKeys.map((key) => Math.round(Number(newTagData[key] || 0)));

      if (document.getElementById('deviationAlarmChart')) {
        const deviationDom = document.getElementById('deviationAlarmChart');
        if (deviationDom) {
          const deviationAlarmChart = echarts.getInstanceByDom(deviationDom);
          if (deviationAlarmChart) {
            deviationAlarmChart.setOption({
              series: [{ data: cpcHydraulic }, { data: cpcStrip }],
            });
          }
        }
      }

      const tensionSetKeys = [
        'G102_433NI',
        'G102_438NI',
        'G102_443NI',
        'G102_448NI',
        'G102_453NI',
        'G102_458NI',
        'G102_463NI',
        'G102_468NI',
        'G102_473NI',
        'G102_478NI',
      ];
      const tensionRealKeys = [
        'G102_434NI',
        'G102_439NI',
        'G102_444NI',
        'G102_449NI',
        'G102_454NI',
        'G102_459NI',
        'G102_464NI',
        'G102_469NI',
        'G102_474NI',
        'G102_479NI',
      ];
      const tensionSet = tensionSetKeys.map((key) => parseFloat(Number(newTagData[key] || 0).toFixed(2)));
      const tensionReal = tensionRealKeys.map((key) => parseFloat(Number(newTagData[key] || 0).toFixed(2)));
      const tensionAll = tensionSet.concat(tensionReal);
      let tensionMax = Math.ceil(Math.max(...tensionAll) * 1.2);
      let tensionMin = Math.floor(Math.min(...tensionAll) * 1.2);
      if (document.getElementById('furnaceTensionChart')) {
        const furnaceDom = document.getElementById('furnaceTensionChart');
        if (furnaceDom) {
          const furnaceTensionChart = echarts.getInstanceByDom(furnaceDom);
          if (furnaceTensionChart) {
            furnaceTensionChart.setOption({
              yAxis: { min: tensionMin, max: tensionMax },
              series: [{ data: tensionSet }, { data: tensionReal }],
            });
          }
        }
      }
    },
    { deep: true }
  );

  // 初始化仪表盘
  const initScoreChart = (chartId: string, value: number) => {
    let speedChart = echarts.getInstanceByDom(document.getElementById(chartId) as HTMLElement);
    if (!speedChart) {
      speedChart = echarts.init(document.getElementById(chartId) as HTMLElement);
    }
    const baseOption = SpeedBaseOption[chartId];
    let option = {
      series: [
        {
          type: 'gauge',
          center: ['50%', '50%'],
          radius: '80%',
          startAngle: 225,
          endAngle: -45,
          max: baseOption.max,
          axisLine: {
            roundCap: true,
            lineStyle: {
              width: 7,
              color: [
                [
                  1,
                  new echarts.graphic.LinearGradient(0, 1, 0.9, 1, [
                    {
                      offset: 0,
                      color: '#D64444',
                    },
                    {
                      offset: 0.2,
                      color: '#D86E6D',
                    },
                    {
                      offset: 0.5,
                      color: '#F1F3F4',
                    },
                    {
                      offset: 0.65,
                      color: '#F1F3F4',
                    },
                    {
                      offset: 0.8,
                      color: '#79ACF6',
                    },
                    {
                      offset: 1,
                      color: '#1976FD',
                    },
                  ]),
                ],
              ],
            },
          },
          pointer: {
            // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '90%',
            width: 2,
            // offsetCenter: [0, '-60%'],
            // itemStyle: {
            //     color: 'FFFFFF'
            // }
            // shadowColor : '#000',
            color: 'FFFFFF',
          },
          axisTick: {
            distance: -14,
            length: 2,
            lineStyle: {
              color: '#4B83F7',
              width: 2,
            },
          },
          splitLine: {
            distance: -16,
            length: 6,
            lineStyle: {
              color: '#4B83F7',
              width: 2,
            },
          },
          axisLabel: {
            color: '#FFF',
            fontSize: 14,
            distance: -30,
            rotate: 'tangential',
            formatter: function (value: any) {
              if (value === 0) {
                return '';
              } else if (value === baseOption.segmentation1) {
                return '';
              } else if (value === baseOption.segmentation2) {
                return '';
              } else if (value === baseOption.max) {
                return '';
              }
              return '';
            },
          },
          title: {
            offsetCenter: [0, '70%'],
            fontSize: 12,
            color: '#FFF',
          },
          detail: {
            fontSize: 18,
            offsetCenter: [0, '30%'],
            valueAnimation: true,
            formatter: function (value: any) {
              return Math.round(value); // 只显示整数
            },
            color: '#FFF',
          },
          data: [
            {
              value: value,
              name: 'mpm',
            },
          ],
        },
      ],
    };
    speedChart.setOption(option);
  };
  const footTable = ref<any[]>([]);

  // 新增弹窗控制和选中卷号
  const showShapeDialog = ref(false);
  const selectedCoilId = ref('');

  // 板形仪通道号(长度序列)数据
  const plateCurveData = ref<any>([]);

  // === 复制PlanRollDeviationPrediction.vue的findAll4和echart_test7 ===
  async function findAll4(extid: any, row: any) {
    let params = [
      'tcm_shape_channe_0',
      'tcm_shape_channe_1',
      'tcm_shape_channe_2',
      'tcm_shape_channe_3',
      'tcm_shape_channe_4',
      'tcm_shape_channe_5',
      'tcm_shape_channe_6',
      'tcm_shape_channe_7',
      'tcm_shape_channe_8',
      'tcm_shape_channe_9',
      'tcm_shape_channe_10',
      'tcm_shape_channe_11',
      'tcm_shape_channe_12',
      'tcm_shape_channe_13',
      'tcm_shape_channe_14',
      'tcm_shape_channe_15',
      'tcm_shape_channe_16',
      'tcm_shape_channe_17',
      'tcm_shape_channe_18',
      'tcm_shape_channe_19',
      'tcm_shape_channe_20',
      'tcm_shape_channe_21',
      'tcm_shape_channe_22',
      'tcm_shape_channe_23',
      'tcm_shape_channe_24',
      'tcm_shape_channe_25',
      'tcm_shape_channe_26',
      'tcm_shape_channe_27',
      'tcm_shape_channe_28',
      'tcm_shape_channe_29',
      'tcm_shape_channe_30',
      'tcm_shape_channe_31',
      'tcm_shape_channe_32',
      'tcm_shape_channe_33',
      'tcm_shape_channe_34',
      'tcm_shape_channe_35',
      'tcm_shape_channe_36',
      'tcm_shape_channe_37',
      'tcm_shape_channe_38',
      'tcm_shape_channe_39',
      'tcm_shape_channe_40',
      'tcm_shape_channe_41',
      'tcm_shape_channe_42',
      'tcm_shape_channe_43',
      'tcm_shape_channe_44',
      'tcm_shape_channe_45',
      'tcm_shape_channe_46',
      'tcm_shape_channe_47',
      'tcm_shape_channe_48',
      'tcm_shape_channe_49',
      'tcm_shape_channe_50',
      'tcm_shape_channe_51',
      'tcm_shape_channe_52',
      'tcm_shape_channe_53',
      'tcm_shape_channe_54',
      'tcm_shape_channe_55',
      'tcm_shape_channe_56',
      'tcm_shape_channe_57',
      'tcm_shape_channe_58',
      'tcm_shape_channe_59',
      'tcm_shape_channe_60',
      'tcm_shape_channe_61',
      'tcm_shape_channe_62',
      'tcm_shape_channe_63',
      'tcm_s5_strip_speed_act',
    ];
    const graphParam = {
      line: 'TCM2280',
      extid: [extid],
      curve: params,
    };
    const response = await historyApi.getgraphData(graphParam);
    if (response.data.data.curve[0]) {
      echart_test7([response.data.data.curve[0]]);
    } else {
      echart_test7(null);
    }
  }

  function echart_test7(datas10: any) {
    let fakeArr = Array.from({ length: 20 }, (_, i) => Array.from({ length: 64 }, () => Math.random() * 10 - 5));
    let dataObj = datas10 && datas10[0] && Object.keys(datas10[0]).length > 0 ? datas10[0] : null;
    let res: any[] = [];
    let max = 0;
    let need_x11: number[] = [];
    if (dataObj) {
      Object.entries(dataObj).forEach(([key, value]) => {
        const macthReq = /tcm_shape_channe_(\d+)$/.exec(key);
        if (!macthReq || (Array.isArray(value) && value.every((i: any) => i === 0))) return;
        const index = Number(macthReq[1]);
        max = Math.max(max, index);
        if (Array.isArray(value)) {
          value.forEach((v: any, i: any) => {
            res.push([i, index, v]);
            if (need_x11.length < value.length) {
              need_x11.push(i + 1);
            }
          });
        }
      });
    } else {
      // 用假数据
      for (let ch = 0; ch < 64; ch++) {
        for (let i = 0; i < 20; i++) {
          res.push([i, ch, fakeArr[i][ch]]);
        }
      }
      need_x11 = Array.from({ length: 20 }, (_, i) => i + 1);
      max = 63;
    }
    let days = Array.from({ length: 64 }, (_, i) => `c_${i}`);
    let listMxsMin = days.length - max;
    let a1: any = [];
    for (let i = 0; i < listMxsMin; i++) {
      a1.push('0.00');
    }
    const myChart = echarts.init(document.getElementById('shape-curve-echart'));
    const option = {
      backgroundColor: '#263451',
      title: {
        text: '板形仪通道号(长度序列)' + (selectedCoilId.value || ''),
        textStyle: {
          color: '#fff',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'sans-serif',
          fontSize: 16,
        },
      },
      tooltip: {
        backgroundColor: '#fff',
        borderColor: '#2979ff',
        borderWidth: 1,
        textStyle: {
          color: '#222',
          fontSize: 14,
        },
        extraCssText: 'box-shadow:0 0 8px #2979ff88;border-radius:6px;',
      },
      grid: { left: '3%', right: '6%', containLabel: true },
      xAxis: {
        axisLine: { lineStyle: { color: '#fff', width: 1 } },
        name: '(m)',
        nameTextStyle: { fontSize: 14, color: '#fff' },
        type: 'category',
        data: need_x11,
        axisLabel: { color: '#fff', fontSize: 14 },
        splitLine: { show: true, lineStyle: { type: 'dotted', color: '#ccc' } },
      },
      yAxis: {
        axisLine: { lineStyle: { color: '#fff', width: 1 } },
        nameTextStyle: { fontSize: 12, color: '#fff' },
        type: 'category',
        data: days,
        axisLabel: { color: '#fff', fontSize: 14 },
        splitLine: { show: true, lineStyle: { type: 'dotted', color: '#ccc' } },
      },
      legend: { left: 'center', textStyle: { fontSize: 16, color: '#fff' } },
      visualMap: {
        min: -25,
        max: 25,
        calculable: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        realtime: false,
        textStyle: { color: '#fff', fontSize: 14 },
        inRange: {
          color: [
            'RGB(0,10,255)',
            'RGB(0,150,255)',
            'RGB(0,199,255)',
            '#11fff9',
            'RGB(0,255,0)',
            '#FFF500',
            'RGB(255,230,0)',
            'RGB(249, 102, 72)',
            'RGB(255,0,0)',
          ],
        },
      },
      series: [{ pointSize: 10, type: 'heatmap', data: res.sort((a: any, b: any) => a[0] - b[0]) }],
    };
    myChart.clear();
    myChart.setOption(option, true);
  }
  // === End of copied functions ===

  // 替换点击表格行事件，直接调用findAll4
  const handleCoilRowClick = (row: any) => {
    selectedCoilId.value = row.entId;
    showShapeDialog.value = true;
    findAll4(row.entId, row);
  };

  // 移除fetchShapeCurve和renderShapeEchart相关代码
</script>
<style scoped lang="less">
  .home {
    width: 100vw;
    background: url(/@/assets/images/home/body-bg.jpg) no-repeat;

    .home-main {
      height: 100%;

      .top {
        width: 100%;
      }

      .middle {
        width: 100%;

        .svg {
          width: 100%;
          height: 100%;

          svg {
            width: 100%;
          }
        }
      }

      .footer {
        width: 100%;
        height: 240px;
      }
    }
  }

  .header {
    height: 10vh;
    background-image: url(/src/assets/img/head-bg.png);
    background-size: 100% 100%;
  }

  .warn {
    color: #fff;
    width: 30vw;
    height: 3.5vh;
    padding-left: 3vw;
  }

  .top-middle {
    display: flex;
    width: 48vw;
    margin-left: 1%;
    margin-top: 5px;

    :deep(.el-table-column) {
      &:nth-child(1) {
        width: 20% !important;
      }

      &:nth-child(n + 2) {
        width: 16% !important;
      }
    }
  }

  .msg-title {
    background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2vh;
    font-weight: bolder;
    width: 11vw;
    padding-top: 8px;
    padding-left: 1.8vw;
  }

  .information {
    color: #fff;
    width: 20vw;
    height: 4vh;
    border: 2px solid #3981d9;
    border-radius: 5px;
    padding-top: 3px;
    overflow: auto;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
  }

  .information span {
    display: inline-block;
    /*inline样式不能使用动画*/
    animation: scroll 10s linear infinite;
    /*滚动动画*/
  }

  @keyframes scroll {
    from {
      transform: translateX(150px);
      /*div多宽就写多宽*/
    }

    to {
      transform: translateX(-100%);
    }
  }

  .middle {
    height: 30vh;
    width: 100%;
  }

  .svg {
    margin-top: 4.5vh;
    height: 100%;
    width: 100%;
  }

  .svg svg {
    height: 100%;
    width: 100%;
  }

  .bad_information {
    position: absolute;
    width: 17vw;
    height: 12vh;
    left: 82.5vw;
    top: -5.5vh;
    z-index: 9999;
  }

  .inlet_looper {
    position: absolute;
    left: 16.5vw;
    top: 9.7vh;
    width: 5vw;
    font-size: 8px;
  }

  .inlet_looper_time {
    position: absolute;
    left: 16.5vw;
    top: 7.1vh;
    width: 5vw;
    font-size: 8px;
    line-height: 12px;
  }

  p {
    margin-bottom: 0;
  }

  /** >looper */
  .semitransp_box {
    border-radius: 4px;
    background: #063e90;
    width: fit-content;
    font-weight: 600;
    text-align: center;
    align-content: center;
    color: #fff;
    font-size: 8px;
    padding: 2px 4px;
    /* Added some padding */
  }

  .cpc4_semitransp_box {
    border-radius: 4px;
    background: red;
    /* Default, consider dynamic based on alarm */
    width: fit-content;
    font-weight: 600;
    text-align: center;
    align-content: center;
    color: #fff;
    font-size: 8px;
    padding: 2px 4px;
    /* Added some padding */
  }

  .cpc4_width {
    position: absolute;
    left: 77vw;
    top: 34vh;
    width: auto;
    /* Adjust to fit content */
    min-width: 7vw;
    /* Ensure minimum width if needed */
    font-size: 8px;
  }

  .middle_looper {
    position: absolute;
    left: 30.6vw;
    top: 10.7vh;
    width: 4.7vw;
    font-size: 8px;
  }

  .entZincPot {
    position: absolute;
    left: 59.5vw;
    top: 28vh;
    width: 4.5vw;
    font-size: 8px;
  }

  .zincPotGa {
    position: absolute;
    left: 64.5vw;
    top: 26.5vh;
    width: 5vw;
    font-size: 8px;
  }

  .zincPotGi {
    position: absolute;
    left: 64.5vw;
    top: 29.5vh;
    width: 5vw;
    font-size: 8px;
  }

  .AlFeBox {
    background-color: #063e90;
    border-radius: 10px;
    color: white;
    position: absolute;
    left: 65.1vw;
    top: 12vh;
    padding: 0 0.3rem;
    font-size: 8px;
  }

  .middle_looper_time {
    position: absolute;
    left: 30.6vw;
    top: 8.5vh;
    width: 4.7vw;
    font-size: 8px;
  }

  .export_looper {
    position: absolute;
    left: 72vw;
    top: 10.6vh;
    width: 4.7vw;
    font-size: 8px;
  }

  .export_looper_time {
    position: absolute;
    left: 72vw;
    top: 8.5vh;
    width: 4.7vw;
    font-size: 8px;
  }

  .uncoiler_remaining_length_a {
    position: absolute;
    left: 6.5vw;
    top: 2vh;
    padding-left: 0.5vw;
    text-align: left;
    width: auto;
    /* Adjust to fit content */
    min-width: 4vw;
    font-size: 8px;
  }

  .uncoiler_remaining_length_b {
    position: absolute;
    left: 6.5vw;
    top: 5vh;
    padding-left: 0.5vw;
    text-align: left;
    width: auto;
    /* Adjust to fit content */
    min-width: 4vw;
    font-size: 8px;
  }

  .coiler_remaining_length_a {
    position: absolute;
    left: 88vw;
    top: 17vh;
    padding-left: 0.5vw;
    text-align: left;
    width: auto;
    /* Adjust to fit content */
    min-width: 6vw;
    font-size: 8px;
  }

  .coiler_remaining_length_b {
    position: absolute;
    left: 88vw;
    top: 20vh;
    padding-left: 0.5vw;
    text-align: left;
    width: auto;
    /* Adjust to fit content */
    min-width: 6vw;
    font-size: 8px;
  }

  .yield-strength {
    padding: 0 1rem;
    position: absolute;
    left: 64vw;
    top: 8vh;
    font-size: 8px;
    height: 14px;
    align-content: center;
  }

  .statistics_info {
    position: absolute;
    left: 80vw;
    top: 8.3vh;
    /* background-color: red; */
    z-index: 900;
    width: 26%;
    height: 27%;
  }

  /**>middle_monitor */
  .middle_monitor {
    width: 35vw;
    height: 9vh;
    position: absolute;
    left: 17.5vw;
    top: -3vh;
    /* background-color: red; */
    z-index: 888;
    border: #3981d9;
    border-style: solid;
    border-width: 2px;
  }

  /** >echart */
  #middle_speed1 {
    position: absolute;
    left: -8vw;
    top: 7vh;
    /* background-color: red; */
    z-index: 889;
    width: 30%;
    height: 35%;
  }

  #middle_speed2 {
    position: absolute;
    left: 47vw;
    top: 7vh;
    /* background-color: red; */
    z-index: 890;
    width: 30%;
    height: 35%;
  }

  #middle_speed3 {
    position: absolute;
    left: 69vw;
    top: 7vh;
    /* background-color: red; */
    z-index: 891;
    width: 30%;
    height: 35%;
  }

  #middle_speed4 {
    position: absolute;
    left: 6.5vw;
    top: 7vh;
    /* background-color: red; */
    z-index: 892;
    width: 30%;
    height: 35%;
  }

  .foot-lineChart {
    width: 100%;
    height: 248px;
    margin-top: 2.5%;
    display: flex;
    align-items: stretch;
  }
  .chart-box {
    width: 100%;
    height: 248px;
    background: transparent;
  }

  .common_table .el-table {
    --el-table-row-hover-bg-color: unset;
    flex: 1;
    // /* 填充剩余空间 */
    // display: flex;
    // flex-direction: column;
  }

  :deep(.common_table .el-table__row:nth-child(odd)) {
    background-color: #223671;
  }

  ::v-deep .el-table,
  .el-table__expanded-cell {
    // margin-left: 5px !important;
    background-color: transparent !important;
  }

  ::v-deep .el-table tr {
    background-color: transparent !important;
  }

  ::v-deep .el-table tbody {
    background-color: transparent !important;
  }

  ::v-deep .el-table--enable-row-transition .el-table__body td {
    color: rgba(255, 255, 255, 0.7);
  }

  ::v-deep .el-table--enable-row-transition .el-table__body td,
  ::v-deep .el-table .cell {
    background-color: transparent !important;
    border: none !important;
  }

  ::v-deep .el-table--enable-row-transition .el-table__body td {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  :deep(.el-table tr) {
    background-color: #162556;
  }

  :deep(.el-table__inner-wrapper::before) {
    background-color: #173d91;
  }

  :deep(.el-table .cell) {
    line-height: 17px;
  }

  .irregular-card {
    position: relative;
    width: 100%;
    height: 110px;
    margin-top: 35px;
    background-image: -webkit-linear-gradient(left, #016b9b, #03dafb);
    // background-image: linear-gradient(135deg, #ff7c7c, #ffeb3b, #26c6da, #7e57c2);
    //点的位置1 2 4 6 8 10 9 7 5 3
    clip-path: polygon(0% 20%, 0% 80%, 25% 100%, 50% 80%, 75% 80%, 100% 80%, 100% 20%, 75% 20%, 50% 20%, 25% 40%);
    animation: flow 1s ease infinite;
    z-index: 1;
  }

  @keyframes flow {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  .pillar {
    position: absolute;
    top: 58px;
    right: 1335px;
    /* 根据需要调整位置 */
    width: 10px;
    /* 柱子的宽度 */
    height: 105px;
    /* 柱子的高度 */
    background-image: url(/src/assets/images/pillar.png);
  }

  .pillar1 {
    position: absolute;
    top: 40px;
    right: 1141px;
    /* 根据需要调整位置 */
    width: 10px;
    /* 柱子的宽度 */
    height: 105px;
    /* 柱子的高度 */
    background-image: url(/src/assets/images/pillar.png);
  }

  .pillar2 {
    position: absolute;
    top: 40px;
    right: 951px;
    /* 根据需要调整位置 */
    width: 10px;
    /* 柱子的宽度 */
    height: 105px;
    /* 柱子的高度 */
    background-image: url(/src/assets/images/pillar.png);
  }

  .pillar3 {
    position: absolute;
    top: 40px;
    right: 526px;
    /* 根据需要调整位置 */
    width: 10px;
    /* 柱子的宽度 */
    height: 105px;
    /* 柱子的高度 */
    background-image: url(/src/assets/images/pillar.png);
  }

  .pillar4 {
    position: absolute;
    top: 40px;
    right: 341px;
    /* 根据需要调整位置 */
    width: 10px;
    /* 柱子的宽度 */
    height: 105px;
    /* 柱子的高度 */
    background-image: url(/src/assets/images/pillar.png);
  }

  .pillar5 {
    position: absolute;
    top: 40px;
    right: 174px;
    /* 根据需要调整位置 */
    width: 10px;
    /* 柱子的宽度 */
    height: 105px;
    /* 柱子的高度 */
    background-image: url(/src/assets/images/pillar.png);
  }

  .irregular-card1 {
    position: relative;
    width: 100%;
    height: 110px;
    margin-top: 35px;
    background-image: -webkit-linear-gradient(left, #fcc68f, #fe7b12);
    //点的位置1 2 4 6 8 10 9 7 5 3
    clip-path: polygon(0% 20%, 0% 80%, 25% 80%, 50% 80%, 75% 80%, 100% 80%, 100% 20%, 75% 20%, 50% 20%, 25% 20%);
    z-index: 1;
  }
  :deep(.blue-dialog) {
    background: linear-gradient(135deg, #22345a 60%, #2a5caa 100%) !important;
    border-radius: 16px;
    box-shadow:
      0 0 32px 4px #2979ff99,
      0 0 0 2px #1a3c7c inset;
    border: none !important;
    padding: 0;
  }
  :deep(.blue-dialog .el-dialog__header) {
    background: transparent !important;
    color: #fff !important;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    text-shadow:
      0 0 8px #2979ff,
      0 0 2px #fff;
    font-size: 20px;
    letter-spacing: 1px;
  }
  :deep(.blue-dialog .el-dialog__title) {
    color: #fff !important;
    background: linear-gradient(90deg, #00eaff 0%, #2979ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
      0 0 8px #2979ff,
      0 0 2px #fff;
  }
  :deep(.blue-dialog .el-dialog__body) {
    background: transparent !important;
    color: #fff !important;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 0 0 24px 0 #2979ff33 inset;
  }
  .blue-dialog-content {
    background: transparent !important;
    color: #fff !important;
    padding: 0 0 10px 0;
  }
  .blue-echart-bg {
    width: 100%;
    height: 480px;
    background: transparent !important;
  }
  :deep(.el-overlay-dialog),
  :deep(.el-dialog__wrapper) {
    background: transparent !important;
    box-shadow: none !important;
  }

  :deep(.el-dialog) {
    background: rgba(34, 52, 90, 0.92) !important;
    border-radius: 20px !important;
    box-shadow:
      0 0 40px 12px #00eaff88,
      0 0 0 2px #2979ff inset !important;
    border: none !important;
    padding: 0 !important;
    backdrop-filter: blur(8px);
    outline: none !important;
  }

  :deep(.el-dialog__header) {
    background: transparent !important;
    color: #fff !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-shadow:
      0 0 12px #00eaff,
      0 0 2px #fff;
    font-size: 22px;
    letter-spacing: 1px;
    border-bottom: none !important;
  }

  :deep(.el-dialog__title) {
    color: #fff !important;
    background: linear-gradient(90deg, #00eaff 0%, #2979ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
      0 0 12px #00eaff,
      0 0 2px #fff;
  }

  :deep(.el-dialog__body) {
    background: transparent !important;
    color: #fff !important;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0 0 32px 0 #2979ff33 inset;
    padding: 24px 32px 32px 32px !important;
  }

  .custom-dialog-overlay {
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 20, 40, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s;
  }

  .custom-dialog-content {
    min-width: 1600px;
    max-width: 90vw;
    min-height: 520px;
    background: rgba(34, 52, 90, 0.95);
    border-radius: 22px;
    box-shadow:
      0 0 48px 12px #00eaff99,
      0 0 0 2px #2979ff inset;
    padding: 0;
    overflow: hidden;
    position: relative;
    animation: dialogPop 0.3s;
    border: none;
  }

  .custom-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 32px 0 32px;
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    background: transparent;
    text-shadow:
      0 0 12px #00eaff,
      0 0 2px #fff;
    letter-spacing: 1px;
    user-select: none;
  }

  .custom-dialog-close {
    font-size: 32px;
    color: #00eaff;
    cursor: pointer;
    margin-left: 24px;
    transition: color 0.2s;
    font-weight: bold;
  }
  .custom-dialog-close:hover {
    color: #fff;
    text-shadow: 0 0 8px #00eaff;
  }

  .custom-dialog-body {
    padding: 0 32px 32px 32px;
    color: #fff;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .custom-echart-bg {
    width: 100%;
    height: 480px;
    background: transparent;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes dialogPop {
    from {
      transform: scale(0.95);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
</style>
